<template>
  <div class="g-container">
    <div id="dBanner"></div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import * as THREE from 'three'

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.z = 5

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)

// 初始化坐标系
const axesHelper = new THREE.AxesHelper(200)
// 添加坐标系
scene.add(axesHelper)

const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 })
const cube = new THREE.Mesh(geometry, material)
cube.position.set(1, 0, 0)
scene.add(cube)

const light = new THREE.DirectionalLight(0xffffff, 1)
light.position.set(-1, 2, 4)
scene.add(light)

onMounted(() => {
  document.querySelector('#dBanner').appendChild(renderer.domElement)
  animate()
})

const animate = () => {
  requestAnimationFrame(animate)

  renderer.setSize(window.innerWidth, window.innerHeight)
  const canvas = renderer.domElement
  camera.aspect = canvas.clientWidth / canvas.clientHeight
  camera.updateProjectionMatrix()

  // cube.rotation.x += 0.01;
  cube.rotation.y += 0.01
  renderer.render(scene, camera)
}
</script>

<style scoped>
.g-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
